<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="apple-touch-icon" href="apple-touch-icon.png">
    <link rel="shortcut icon" href="favicon.ico" />
    <link rel="manifest" href="main.webmanifest">
    <title>T Library</title>
  </head>
  <body>
    <link rel="stylesheet" href="css/main.css"/>
    <!-- <script src="js/Theme.js"></script> -->
    <script src="../src/3rdParty/ammo.js/build/ammo.wasm.js"></script>
    <div class="div-fullscreen"><div id="container"></div></div>
    <div class="float-panel">
      <div id="response">您好,我是小U.<br/>首都师范大学人工智能实验室的AI助手.</div>
      <div id="request" >
        <input id="uInput" type="text" placeholder="你叫什么名字？"/>
        <button id="uSend" >发送</button>
      </div>
    </div>
    <script type="module">
      // UIs
      import { HoneycombMenu } from "./js/HoneycombMenu.js";
      import A3 from "../src/A3.js";
      import A3Object from "../src/A3Object.js";
      import A3ObjectGroup from "../src/A3ObjectGroup.js";
      import A3Ground, { A3Ceiling, A3Floor, A3Wall, A3Door, A3DoubleDoor } from "../src/modules/static/A3Ground.js";
      import { A3DirectionalLight } from "../src/graphics/A3Lights.js";
      import {A3MonocularCamera} from "../src/graphics/Graphics.js";
      import { A3RevolvedDoor } from "../src/modules/dynamic/A3Furnitures.js";

      // UIs
      fetch("./menu.json").then((response)=>{
        return response.json();
      }).then((json)=>{
        console.log(json)
        var menu = new HoneycombMenu(json.items, json.size, json.rows, json.cols);
        document.body.appendChild( menu.dom );
      }); 

      const container = document.getElementById( 'container' );

      // // 光源
      // const light = new A3DirectionalLight( -5, 5, 5 );
      // a3.add( light );

      const a3 = new A3( container );
      await a3.init( 3000 );
      console.log(a3);

      // 使用JSON文件建立实验室
      const url = "files/lib.json";

      fetch( url )
      .then( response => { return response.json(); })
      .then( data => {
        createLibrary( data );
      });

      const libDoors = [];

      function createLibrary( data ) {

        const width = data.Width;
        const height = data.Height;
        const depth = data.Depth;

        const floor = data.Floor;
        const ceiling = data.Ceiling;
        const walls = data.Walls;
        const doors = data.Doors;

        // 大地
        const ground = new A3Ground(width + 200, 20, depth + 200);
        a3.add( ground );
        // 地板
        createObject( floor, "Floor" );

        // 天花板
        createObject( ceiling, "Ceiling" );

        for( var i = 0, il=walls.length; i < il; i++ ) {
          createObject( walls[i], "Wall" );
        }

        for( var i = 0, il=doors.length; i < il; i++ ) {
          const newDoor = createObject( doors[i], "Door" );
          libDoors.push( newDoor );
        }

        // 打开所有门
        for( var i=0, il=libDoors.length; i < il; i++ ) {
          // libDoors[i].open();
          // libDoors[i].close();
          // console.log(libDoors[i].position, libDoors[i].userPosition)
        }

      }

      function createObject( dat, type ) {

        let obj;

        switch( type ){

          case "Floor": obj = new A3Floor( dat.size[0], dat.size[1], dat.size[2] ); break;
          case "Ceiling": obj = new A3Ceiling( dat.size[0], dat.size[1], dat.size[2] ); break;
          case "Wall": obj = new A3Wall( dat.size[0], dat.size[1], dat.size[2] ); break;
          case "Door": 
            if( dat.isDouble ){
              obj = new A3DoubleDoor( dat.size[0], dat.size[1], dat.size[2], dat.isOutward );
            }
            else if( dat.revolved ) {
              obj = new A3RevolvedDoor( dat.size[0], dat.size[1], dat.size[2], dat.reversal );
              if( dat.limit ){
                obj.setLimit( dat.limit[0], dat.limit[1] );
              }
            }
            else {
              obj = new A3Door( dat.size[0], dat.size[1], dat.size[2], dat.isLeft, dat.isOutward ); 
            }
            break;
          default: obj = new A3Object( dat.size[0], dat.size[1], dat.size[2] ); break;

        }

        if( obj ) {

          if( dat.color ) {
            obj.setColor( dat.color[0], dat.color[1], dat.color[2] );
          }

          if( dat.opacity ) {
            obj.setOpacity( dat.opacity );
          }

          if( dat.texture ) {
            obj.updateTexture(dat.texture);
          }

          obj.setPosition( dat.position[0], dat.position[1], dat.position[2] );
          obj.setRotation( dat.rotation[0], dat.rotation[1], dat.rotation[2] );
          a3.add( obj );

        }

        return obj;

      }

      // 测试
      const boxSize = 10;

      for( var x  = 0; x < 5; x ++ ) {
        for( var y = 0; y < 5; y ++ ) {
          for( var z = 0; z < 5; z++ ){
            const box = new A3Object( boxSize, boxSize, boxSize, "sphere" );
            box.name=`sphere-${x}`;
            box.setPosition( x * boxSize, y * boxSize + boxSize * 5, z * boxSize );
            box.setColor( Math.random(), Math.random(), Math.random() );
            box.setRestitution( 1.8 );
            a3.add( box );
          }
        }
      }

      // // 物体组合测试
      // const obj1 = new A3Object( 50, 50, 50 );
      // obj1.setPosition( 0,50, 0 );
      // obj1.setColor( 1, 0, 0 );
      // // a3.add( obj1 );

      // const obj2 = new A3Object( 50, 50, 50 );
      // obj2.setPosition( 100,50, 0 );
      // obj2.setColor( 0, 1, 0 );
      // // a3.add( obj2 );

      // 第一视角
      const camera = new A3MonocularCamera();
      a3.add(camera);
      console.log("camera", camera)
      // 测试用

      const d = new A3RevolvedDoor( 10, 250, 200 );
      d.setPosition( 0, 150, 0 );
      // d.setRotation( Math.PI / 2, 0, 0 )
      a3.add( d );

    
      // <!-- 小U机器人 -->

      const requestDemoStr = [
        "你叫什么名字?",
        "现在是什么时间?",
        "我想使用工具箱.",
        "我想和你玩一把五子棋.",
        "给我介绍下实验室情况."
      ];

      const uResponse = document.getElementById("response")
      const uInput = document.getElementById("uInput");
      const uSend = document.getElementById("uSend");

      const autoClear = true;
      const clearTime = 1000;

      // 随机请求提示
      uInput.placeholder = requestDemoStr[ Math.floor( Math.random() * requestDemoStr.length ) ];

      uSend.onclick = ()=>{
        var responseStr = uInput.value;

        if( !responseStr ) {
          responseStr = uInput.placeholder;
        }

        // 复读机
        uResponse.innerText = responseStr;

        processRequest( responseStr );

      }

      function clearResponse(){
        uResponse.innerText = "";
      }

      function processRequest( request ) {
        if( !request ) {
          uResponse.innerText = "您想问什么问题呢?";
        }

        if( request.indexOf("名字") !== -1 ) {
          uResponse.innerText = "我叫小U,是首都师范学人工智能实验室的AI助手.";
        }

        else if( request.indexOf("时间") !== -1 ) {

          const time = new Date();
          uResponse.innerText = `时间:${time.toLocaleTimeString()}`;

        }

        // 页面跳转示例
        else if( request.indexOf("工具") !== -1 ){
          // todo: 跳转动画
          window.location.href= "../toolkit/index.html";
        }

        // 实验室交互示例
        else if( request.indexOf("实验室") !== -1 ) {
          console.log( a3 );
        }

        else if( request.indexOf("五子棋") !== -1 ){
          // todo: 跳转动画
          window.location.href= "../games/gobang.html";
        }

        else {
          uResponse.innerText = "对不起,我听不懂你在说什么?";
        }

        if( autoClear ) {
          setTimeout(clearResponse, clearTime );
        }
      }

      // setTimeout(clearResponse, clearTime );

    </script>
  </body>
</html>